<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户注册</title>
		<link rel="stylesheet" href="bootstrap.min.css">
		<style>
			body{
				background:url(1.jpg) no-repeat;
				background-size:100%;
			}
			.wrap{
				width: 800px;
				height: 400px;
				border: 1px solid #999;
				margin:150px auto;
				position: relative;
			}
			h2{
				margin-left: 20px;
				color: #fff;
			}
			.form-group{
				margin-left: 20px;
				margin-top: 10px;
				font-size: 20px;
			}
			#username,#password{
				width: 600px;
			}
			#register{
				width: 100px;
				height: 50px;
				font-size: 20px;
				position: absolute;
				left: 600px;
				bottom:50px;
			}
		</style>
	</head>
	<body>
		
		<div class='wrap'>
			<h2>用户注册</h2>
			<hr>
			<div class="form-group">
				<label for="username">用户名</label>
				<input type="email" class="form-control" id="username" placeholder="请输入用户名">
			</div>
			<div class="form-group">
				<label for="password">密码</label>
				<input type="password" class="form-control" id="password" placeholder="请输入密码">
			</div>
			<button type="submit" class="btn btn-primary" id="register">注册</button>
		</div>
		<script src="jquery.min.js"></script>
		<!-- 存放公用的访问地址 -->
		<script src="common.js"></script>
		<script>
			//给注册按钮绑定单击事件后向后端发送ajax请求
			$("#register").click(function(){
				$.ajax({
					//请求地址【采用字符串的拼接】
					url:`${url}/register`,
					//请求数据【用户名和密码】
					data:{
						username:$("#username").val(),
						password:$("#password").val()
					},
					//请求成功后接受到的回调函数
					success(data){
						//如果后端返回的数据为success则弹出“注册成功”，并且跳转到登录界面
						if(data === "success"){
							alert("注册成功");
							location.href = `${url}/login.html`
						}
						//如果后端返回的数据不为success，则：
						else{
							//如果后端返回的数据为repeat弹出该用户已经存在，否则其他情况下直接弹出注册失败
							if(data === "repeat"){
								alert("该用户名已存在")
							}
							else{
								alert("注册失败")
							}
						}
					}
				})
			})

		</script>
	</body>
</html>
